<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('上传文件')" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="f_sz" th:object="${enterprise}">
			<input id="rectId" name="enterpriseId" type="hidden" th:field="*{enterpriseId}"/>
			<div class="form-group">
				<label class="col-sm-3 control-label ">上传菜品图片：</label>
				<div class="col-sm-8">
				<a class="form-control" onclick="selectFood()" >上传</a>
				<input style="display:none" type="file" th:value="文件上传" th:id="food" name="food" multiple="multiple" onchange="change(1)"/>
				<div class="col-sm-8" id="con"></div>
				</div>
					
			</div>	
		
			<div class="form-group">
				<label class="col-sm-3 control-label ">上传营业执照图片：</label>
				<div class="col-sm-8">
				<a class="form-control" onclick="selectLicense()" >上传</a>
					 <input style="display:none" type="file" th:value="文件上传" th:id="license" name="license" multiple="multiple" onchange="change(2)" />
				<div class="col-sm-8" id="licCon"></div>
				</div>	
				
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label ">上传餐厅环境图片：</label>
				<div class="col-sm-8">
				<a class="form-control" onclick="selectEnv()" >上传</a>
					 <input style="display:none" type="file" th:value="文件上传" th:id="env" name="env" multiple="multiple" onchange="change(3)"/>
				<div class="col-sm-8" id="envCon"></div>
				</div>
					
			</div>	
			
			<div class="form-group">
				<label class="col-sm-3 control-label ">上传餐厅企业logo：</label>
				<div class="col-sm-8">
				<a class="form-control" onclick="selectLogo()" >上传</a>
					 <input style="display:none" type="file" th:value="文件上传" th:id="logo" name="logo" multiple="multiple" onchange="change(4)"/>
				<div class="col-sm-8" id="logoCon"></div>
				</div>
					
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label ">上传视频：</label>
				<div class="col-sm-8">
				<a class="form-control" onclick="selectVideo()" >上传</a>
					 <input style="display:none" type="file" th:value="文件上传" th:id="video" name="video" multiple="multiple" onchange="change(5)"/>
				<div class="col-sm-8" id="videoCon"></div>
				</div>
					
			</div>
			
			 			
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: ztree-js" />
	<script type="text/javascript">
	
	function selectFood(){
		document.getElementById("food").click();
	}
	
	function selectLicense(){
		document.getElementById("license").click();
	}
	
	function selectEnv(){
		document.getElementById("env").click();
	}
	
	function selectLogo(){
		document.getElementById("logo").click();
	}
	
	function selectVideo(){
		document.getElementById("video").click();
	}
	  	
	$("#f_sz").validate();
	
	function submitHandler() {
        if ($.validate.form()) {
        	add();
        }
    }

	function add() {
		if(confirm("确认要上传吗？如果上传文件比较大，等待时间会稍长......")){
			var sign=check();
			if(sign==1){
				return;
			}
			var formData = new FormData($("#f_sz")[0]);
			
			formData.delete('food');
			for(var i=0;i<uploadfiles.length;i++){
				formData.append('food',uploadfiles[i]);
			}
			
			formData.delete('license');
			for(var i=0;i<licfiles.length;i++){
				formData.append('license',licfiles[i]);
			}
			
			formData.delete('env');
			for(var i=0;i<envfiles.length;i++){
				formData.append('env',envfiles[i]);
			}
			
			formData.delete('logo');
			for(var i=0;i<logofiles.length;i++){
				formData.append('logo',logofiles[i]);
			}
			
			formData.delete('video');
			for(var i=0;i<videofiles.length;i++){
				formData.append('video',videofiles[i]);
			}
			var enterpriseId = $("input[name='enterpriseId']").val();
							
			$.ajax({
				cache : true,
				type : "POST",
				url : ctx + "enterprise/upload",
				data : formData,
				processData: false,
				contentType: false, 
				async : false,
				error : function(request) {
					$.modal.alertError("系统错误");
				},
				success : function(data) {
					$.operate.successCallback(data);
				}
			});
		}
		
	};
	//限制上传的文件
	function check(){
		var foods=document.getElementById("food");
		for(var i=0;i<foods.files.length;i++){
			_fileName = foods.files[i].name.substring(foods.files[i].name.lastIndexOf(".") + 1).toLowerCase();
		    if (_fileName !== "png" && _fileName !== "jpg") {
		        alert("上传菜品图片格式不正确，请重新上传");
		        return 1;
		    }
		}
		
		var licenses=document.getElementById("license");
		for(var i=0;i<license.files.length;i++){
			_fileName = licenses.files[i].name.substring(licenses.files[i].name.lastIndexOf(".") + 1).toLowerCase();
		    if (_fileName !== "png" && _fileName !== "jpg") {
		        alert("上传营业执照图片格式不正确，请重新上传");
		        return 1;
		    }
		}
		
		var envs=document.getElementById("env");
		for(var i=0;i<envs.files.length;i++){
			_fileName = envs.files[i].name.substring(envs.files[i].name.lastIndexOf(".") + 1).toLowerCase();
		    if (_fileName !== "png" && _fileName !== "jpg") {
		        alert("上传环境图片格式不正确，请重新上传");
		        return 1;
		    }
		}
		
		var logos=document.getElementById("logo");
		for(var i=0;i<logos.files.length;i++){
			_fileName = logos.files[i].name.substring(logos.files[i].name.lastIndexOf(".") + 1).toLowerCase();
		    if (_fileName !== "png" && _fileName !== "jpg") {
		        alert("上传logo图片格式不正确，请重新上传");
		        return 1;
		    }
		}
		
		var videos=document.getElementById("video");
		for(var i=0;i<videos.files.length;i++){
			_fileName = videos.files[i].name.substring(videos.files[i].name.lastIndexOf(".") + 1).toLowerCase();
		    if (_fileName !== "mp4" && _fileName !== "rmvb"&& _fileName !== "avi"&& _fileName !== "flv"&& _fileName !== "mpg") {
		        alert("上传视频格式不正确，请重新上传");
		        return 1;
		    }
		}
	};
	var uploadfiles=new Array();
	var licfiles=new Array();
	var envfiles=new Array();
	var logofiles=new Array();
	var videofiles=new Array();
	function change(sign) {
		if(sign==1){
			var obj = document.getElementById("food");
			var len = obj.files.length;
			for (var i = 0; i < len; i++) {
			      var temp = obj.files[i].name;
			      console.log(temp);
			      uploadfiles.push(obj.files[i]);
			}
			refreshDiv("con",uploadfiles);
		}
		
		if(sign==2){
			var obj = document.getElementById("license");
			var len = obj.files.length;
			for (var i = 0; i < len; i++) {
			      var temp = obj.files[i].name;
			      console.log(temp);
			      licfiles.push(obj.files[i]);
			}
			refreshDiv("licCon",licfiles);
		}
		
		if(sign==3){
			var obj = document.getElementById("env");
			var len = obj.files.length;
			for (var i = 0; i < len; i++) {
			      var temp = obj.files[i].name;
			      console.log(temp);
			      envfiles.push(obj.files[i]);
			}
			refreshDiv("envCon",envfiles);
		}
		
		if(sign==4){
			var obj = document.getElementById("logo");
			var len = obj.files.length;
			for (var i = 0; i < len; i++) {
			      var temp = obj.files[i].name;
			      console.log(temp);
			      logofiles.push(obj.files[i]);
			}
			refreshDiv("logoCon",logofiles);
		}
		
		if(sign==5){
			var obj = document.getElementById("video");
			var len = obj.files.length;
			for (var i = 0; i < len; i++) {
			      var temp = obj.files[i].name;
			      console.log(temp);
			      videofiles.push(obj.files[i]);
			}
			refreshDiv("videoCon",videofiles);
		}
		
	};
	
	function refreshDiv(id,files){
		var condiv=document.getElementById(id);
        //id.innerHTML="";
        document.getElementById(id).innerHTML = "";
        for(var i=0;i<files.length;i++){
        	var div=document.createElement("div");
            div.style="display:in-line";

            var span=document.createElement("span");
            span.innerHTML=files[i].name;
            span.style.color="black";
            
            var bt=document.createElement("button");
            bt.innerHTML="X";
            bt.style.color="red";
            bt.style.background="transparent";
            bt.style.margin="0 5px";
            bt.dataId=i;
            bt.onclick = function (){
            	files.splice(this.dataId,1);
            	if(id=="con"){
            		uploadfiles=files;
            		//refreshDiv(id,uploadfiles); 
            	}else if(id=="licCon"){
            		licfiles=files;
            		//refreshDiv(id,licfiles);
            	}else if(id=="envCon"){
            		envfiles=files;
            		//refreshDiv(id,envfiles); 
            	}else if(id=="logoCon"){
            		logofiles=files;
            	}else if(id=="videoCon"){
            		videofiles=files;
            	}
            	refreshDiv(id,files);
            	return false;
            }

            condiv.appendChild(div);
            condiv.appendChild(span);
            condiv.appendChild(bt);
            
        }
	}
	
	</script>
</body>
</html>
